// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// import App from './App'

Vue.config.productionTip = false
Vue.prototype.bus = new Vue()

/* eslint-disable no-new */
Vue.component('row', {
  data:function(){
    return{
      content:"It is row."
    }
  },
  template:'<tr><td>{{content}}</td></tr>'
});
Vue.component("temp",{
  data:function(){
    return {
      num:1
    }
  },
  template:"<p @click='numclick'>{{num}}</p>",
  methods:{
    numclick:function(){
      this.num ++;
      this.$emit("change");
    }
  }
});

//非父子组件间的传值
Vue.component('child', {
  props:{
    content:String,
  },
  data:function(){
    return {
      cont:this.content
    }
  },
  template:"<div @click='toBro'>{{cont}}</div>",
  methods:{
    toBro:function(){
      this.bus.$emit('change', this.cont)
    }
  },
  mounted: function() {
    var this_ = this;
    this.bus.$on("change", function(msg){
      this_.cont = msg;
    })
  }
})

//插槽
Vue.component('ll', {
  props:['content'],
  template:"<div><slot name='xw'></slot><p>lau</p><slot name='lxw'>moren</slot></div>",
})

// 作用域插槽
Vue.component('llz', {
  data:function(){
    return {
      list:[1, 2, 3, 4, 5]
    }
  }, 
  template:"<div><ul><slot v-for='item of list' :item='item'></slot></ul></div>"
})

// 动态组件
Vue.component('cone',{
  template:"<p>one</p>"
})
Vue.component('ctwo',{
  template:"<p>two</p>" 
})

new Vue({
  el: '#app',
  data:{
    count:0,
    type:'cone'
  },
  methods:{
    aclick:function(){
      console.log(this.$refs.hello);
    },
    counter:function(){
      this.count = this.$refs.one.num + this.$refs.two.num
    },
    toChange:function(){
      this.type = this.type === 'cone' ? 'ctwo' : 'cone'
    }
  }
})
